// 控制右下角二维码
const pp = document.querySelector('.pp')
const smallewm = document.querySelector('.smallewm')
smallewm.addEventListener('mouseover', function () {
  pp.style.display = 'block'
})
smallewm.addEventListener('mouseout', function () {
  pp.style.display = 'none'
})

// 公司环境图片切换
const office = [['../css/关于我们图片/上海图1.jfif', '../css/关于我们图片/上海图2.jfif', '../css/关于我们图片/上海图3.jfif'], ['../css/关于我们图片/北京图1.jfif', '../css/关于我们图片/北京图2.jfif', '../css/关于我们图片/北京图3.jfif'], ['../css/关于我们图片/武汉图1.jfif', '../css/关于我们图片/武汉图2.jfif', '../css/关于我们图片/武汉图3.jfif']]
const offices = document.querySelectorAll('.office')
const imgs = document.querySelectorAll('.context .image-list')
for (let i = 0; i < offices.length; i++) {
  offices[i].addEventListener('click', function () {
    document.querySelector('.moren1').classList.remove('moren1')
    this.classList.add('moren1')
    for (let j = 0; j < office[i].length; j++) {
      imgs[j].style.backgroundImage = `url(${office[i][j]})`
    }
  })
}

// 小红书发展史
const years = document.querySelectorAll('.growth .selector')
const arr = [[['1月', '7月', '', '下半年'], ['小红书将人工运营内容改成了机器分发的形式', '国务院副总理汪洋视察小红书上海总部', '小红书被国家发改委评为"互联网+百家实践案例"并在全国推广', '小红书拓展了第三方平台和品牌商家，全品类SKU快速成长']], [['5月', '', '6月', '8月', '', '9月', '12月'], ['《人民日报》头版专题报道称小红书已成为“全球最大的社区电商平台”', '国际物流系统正式上线', '小红书第三个“66周年庆大促”，开卖2小时即突破1亿销售额，在苹果App Store购物类下载排名第一。小红书用户突破5000万', '国家监测中心与小红书签订质量安全共治协议', '小红书于武汉建立全球科技总部', '小红书被国家商务部评为全国电子商务示范企业', '小红书与华为等优秀企业一起，被人民日报评为中国品牌']], [['3月', '', '4月', '6月', '', '8月', '10月', '11月', '12月'], ['创始人瞿芳获福布斯“2018中国商界25位潜力女性”称号', '《解放日报》报道小红书为“年轻人信任的中国品牌”', '小红书参加博鳌亚洲论坛2018年年会，被彭博社称作“连接中外消费者的桥梁”', '小红书完成超过3亿美元D轮融资，估值超过30亿美元，用户突破1亿', '小红书第一家线下零售店REDhome在上海开业', '小红书荣登福布斯《2018中国最具创新力企业榜TOP 50》榜单', '小红书用户突破1.5亿', '小红书参加首届中国国际进口博览会', '创始人瞿芳获评新浪财经“2018中国十大经济潮流人物”']], [['1月', '', '2月', '3月', '', '4月', '7月'], ['小红书用户突破2亿', '小红书上线品牌合作人平台', '小红书获评Fast Company中国最佳创新公司', '小红书创始人瞿芳出席女性圆桌论坛', '小红书正式上线品牌号功能', '小红书上榜领英最受职场人欢迎公司', '2019年7月，用户数突破3亿，月活突破1亿']]]

let timer = 0
let eachs = document.querySelectorAll('.each-item')

// 动画函数
function animation(params) {
  let k = 0
  timer = setInterval(function () {
    k++
    if (k >= params.length) {
      k = 0
    }
    // 当前元素清除属性，给下一个元素添加属性
    document.querySelector('.selected').classList.remove('selected')
    document.querySelector(`.growth .each-item:nth-child(${k + 1})`).classList.add('selected')
  }, 2000)
}
animation(eachs)

// 外层循环控制年份切换
years.forEach(function (item, i) {
  item.addEventListener('click', function (e) {
    document.querySelector('.moren2').classList.remove('moren2')
    e.target.classList.add('moren2')
    // 清除定时器，防抖
    clearInterval(timer)
    // 清空对应位置的所有元素
    document.querySelector('.item-wrapper').innerHTML = ''
    // 改变标题年份
    document.querySelector('.year').innerText = `${years[i].innerText}年大事件`
    // 内层循环负责遍历对应年份的事件
    for (let j = 0; j < arr[i][0].length; j++) {
      // 添加节点
      let jiedian = document.createElement('div')
      // 第一个事件默认添加标红
      if (j === 0) {
        // 给节点添加属性
        jiedian.classList.add('each-item')
        jiedian.classList.add('selected')
        jiedian.innerHTML = `
                <span class="month">${arr[i][0][j]}</span>
                <span class="progress">
                  <span class="dot"></span>
                  <i class="line">
                    <i class="process"></i>
                  </i>
                </span>
                <span class="content hoverable">${arr[i][1][j]}</span>
            `
      } else {
        jiedian.classList.add('each-item')
        jiedian.innerHTML = `
                <span class="month">${arr[i][0][j]}</span>
                <span class="progress">
                  <span class="dot"></span>
                  <i class="line">
                    <i class="process"></i>
                  </i>
                </span>
                <span class="content hoverable">${arr[i][1][j]}</span>
            `
      }
      // 节点添加到对应位置
      document.querySelector('.breaking-news .item-wrapper').appendChild(jiedian)
    }
    // 重新获取所有元素并渲染
    animation(document.querySelectorAll('.each-item'))
  })
})
const zc=document.querySelector('.zc')
document.querySelector('.dengLu').addEventListener('click',function () {
  zc.style.opacity = '1'
  zc.style.zIndex = '999'
})